const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');

// const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin');


module.exports = merge(webpackBaseConfig, {
	mode: 'development',
	devtool: 'inline-source-map',

	output: {
		publicPath: '/',

		filename: '[name].js',
		chunkFilename: '[name].chunk.js',
	},
	plugins: [
		new VueLoaderPlugin(),

		// @link https://github.com/webpack-contrib/mini-css-extract-plugin
		new MiniCssExtractPlugin({
			filename: '[name].[hash].css',
			chunkFilename: '[name].[hash].css',
		}),

		new HtmlWebpackPlugin({
			// 使用 devServer 时，filename 是参考 devServer 的 publicPath 的
			// 并且不能使用 ../ 这种上级相对路径
			filename: 'index.html',
			template: './src/template/index.ejs',
			inject: true,
		}),
		// new HtmlWebpackIncludeAssetsPlugin({
		// 	assets: [path.join(__dirname, '../../public', '/static/vendors.web-admin.js')],
		// 	publicPath: false,
		// 	append: false,
		// 	hash: true,
		// }),

		new webpack.DefinePlugin({
			'process.env': {
				DEV: 'true',
			},
		}),

		// new webpack.DllReferencePlugin({
		// 	context: __dirname,
		// 	/* eslint-disable-next-line import/no-dynamic-require */
		// 	manifest: require(path.join(__dirname, '.', 'manifest.json')),
		// }),

		new webpack.HotModuleReplacementPlugin(),
	],
});
